//弹出框水平垂直居中
(window.onresize = function () {
    var win_height = $(window).height();
    var win_width = $(window).width();
    if (win_width <= 768){
        $(".tailoring-content").css({
            "top": (win_height - $(".tailoring-content").outerHeight())/2,
            "left": 0
        });
    }else{
        $(".tailoring-content").css({
            "top": (win_height - $(".tailoring-content").outerHeight())/2,
            "left": (win_width - $(".tailoring-content").outerWidth())/2
        });
    }
})();
//弹出图片裁剪框
$("#replaceImg").on("click",function () {
    $(".tailoring-container").toggle();
});
//图像上传
function selectImg(file) {
    if (!file.files || !file.files[0]){
        return;
    }
    var reader = new FileReader();
    reader.onload = function (evt) {
        var replaceSrc = evt.target.result;
        //更换cropper的图片
        $('#tailoringImg').cropper('replace', replaceSrc,false);//默认false，适应高度，不失真
    }
    reader.readAsDataURL(file.files[0]);
}
//cropper图片裁剪
$('#tailoringImg').cropper({
    aspectRatio: 1/1,//默认比例
    preview: '.previewImg',//预览视图
    guides: false,  //裁剪框的虚线(九宫格)
    autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
    dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
    movable: true,  //是否允许移动剪裁框
    resizable: true,  //是否允许改变裁剪框的大小
    zoomable: false,  //是否允许缩放图片大小
    mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
    touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
    rotatable: true,  //是否允许旋转图片
    crop: function(e) {
        // 输出结果数据裁剪图像。
    }
});
//旋转
$(".cropper-rotate-btn").on("click",function () {
    $('#tailoringImg').cropper("rotate", 45);
});
//复位
$(".cropper-reset-btn").on("click",function () {
    $('#tailoringImg').cropper("reset");
});
//换向
var flagX = true;
$(".cropper-scaleX-btn").on("click",function () {
    if(flagX){
        $('#tailoringImg').cropper("scaleX", -1);
        flagX = false;
    }else{
        $('#tailoringImg').cropper("scaleX", 1);
        flagX = true;
    }
    flagX != flagX;
});

//裁剪后的处理: 修改头像
$("#sureCut").on("click",function () {
    if ($("#tailoringImg").attr("src") == null ){
        return false;
    }else{
        var cas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
        var base64url = cas.toDataURL('image/png'); //转换为base64地址形式
        $("#finalImg").prop("src",base64url);//显示为图片的形式
        $.ajax({
            url: '/user/update/self',
            type: 'PUT',
            data: {base64url:base64url},
            dataType: 'JSON',
            error: (err) =>{ alert('修改头像请求失败.'); console.error(err.responseText);},
            success: (data) => {open_toast(data['code'] == 1 ? 'success' : 'fail', data['message'])}
        })
        //关闭裁剪框
        closeTailor();
    }
});
// 关闭裁剪框
function closeTailor() {
    $(".tailoring-container").toggle();
}
// 还原头像
$('#resetImg').click(function (){
    $('#finalImg').attr('src', $('#finalImg').data('src'))
})
/* 省市三级联动 */
// 获取用户的信息
var prov = $('select[name="prov"]').data('addr')
var city = $('select[name="city"]').data('addr')
var area = $('select[name="area"]').data('addr')
var detail = $('input[name="detail"]').data('addr')
var userGender = $('#form-gender-man').data('gender')
$(function() {
    // 初始化性别
    if (userGender == '2')
        $('#form-gender-man').prop('checked', true)
    else
        $('#form-gender-woman').prop('checked', true)
    // 初始化省市区
    initAddress();
    // 更改省份后的操作
    $("select[name='prov']").change(function() {
        let provCode = $(this).children('option:selected').data('code');
        getCity(provCode);
    });

    // 更改城市后的操作
    $("select[name='city']").change(function() {
        // var cityCode = $("select[name='city']").val();
        let cityCode = $(this).children('option:selected').data('code');
        getArea(cityCode);
    });

});

function initAddress() {
    $('input[name="detail"]').val(detail)
    var firstProvCode ='0';
    // ajax请求所有省份
    $.get({
        url: "/getProvinces",
        dataType: 'JSON',
        error: (err) => {
            alert('获取省份失败.')
            console.error(err.responseText)
        },
        success: (data) => {
            $.each(data, function(i, d) {
                if(d.name === prov) firstProvCode = d.code
                $("select[name='prov']").append(
                    "<option value='" + d.name + "' data-code='"+ d.code + "'" + (d.name===prov ? "' selected>" : "'>") + d.name
                    + "</option>");
            });
            // 获取第一个省份的code
            if(firstProvCode != '0')
                $("select[name='prov']").css('value', prov)
            else
                firstProvCode = data[0].code;
            // 根据第一个省份code获取对应城市列表
             getCity(firstProvCode);
        }
    });

}

//获取对应城市列表（里面包括获取第一个城市的区县列表）
function getCity(provCode) {

    var firstCityCode = '0';

    // ajax请求所有市级单位
    $.get({
        url: "/getCities",
        data: {provCode:provCode},
        dataType: 'JSON',
        error: (err) => {
            alert('获取市区失败.')
            console.error(err.responseText)
        },
        success: (data) => {
            // 先清空城市下拉框
            $("select[name='city']").empty();

            $.each(data, function(i, d) {
                if(d.name === city) firstCityCode = d.code
                $("select[name='city']").append(
                    "<option value='" + d.name + "' data-code='"+ d.code + "'" + (d.name===city ? "' selected>" : "'>") + d.name
                    + "</option>");
            });

            // 获取第一个城市的code
            if(firstCityCode != '0') {
                $("select[name='city']").attr('value', city)
            }else firstCityCode = data[0].code;
            // 根据第一个城市code获取对应区县列表
            getArea(firstCityCode);
        }
    })

}

function getArea(cityCode) {

    // ajax请求所有区县单位
    $.get({
        url: '/getAreas',
        data: {cityCode:cityCode},
        dataType: 'JSON',
        error: (err) =>{
            alert('获取地区信息失败.')
            console.error(err.responseText)
        },
        success: (data) => {
            // 先清空区县下拉框
            $("select[name='area']").empty();
            $.each(data, function (i, d) {
                $("select[name='area']").append(
                    "<option value='" + d.name + "' data-code='"+ d.code + "'" + (d.name===area ? "' selected>" : "'>") + d.name
                    + "</option>");
            });
        }
    })
}
// 检验
var check_phone = false
var check_name = false
var check_address = false
$('#form-phone').bind('input propertychange blur', function (){
    let reg = /^1\d{10}$/
    if(reg.test($(this).val())){
        check_phone = true
        $(this).next().css('color', 'green')
        $(this).next().text("√")

    } else{
        check_phone = false
        $(this).next().css('color', 'red')
        $(this).next().text("* 请输入规范的联系电话")
    }
});
$('#form-name').bind('input propertychange blur', function (){
    let reg = /^[\u4E00-\u9FA5]+$/
    if(reg.test($(this).val()) && $(this).val().length <= 5){
        check_name = true
        $(this).next().css('color', 'green')
        $(this).next().text("√")

    } else{
        check_name = false
        $(this).next().css('color', 'red')
        $(this).next().text("* 请输入规范的中文名称")
    }
})
$('#form-address').bind('input propertychange blur', function (){
    if($(this).val().length <= 128){
        check_address = true
        $(this).next().css('color', 'green')
        $(this).next().text("目前长度: "+ $(this).val().length + " √")

    } else{
        check_address = false
        $(this).next().css('color', 'red')
        $(this).next().text("* 请输入指定范围内的详细地址")
    }
})
// 保存信息
$('#u-btn-modify-save').click(function (){

    $('#form-name').blur();
    $('#form-phone').blur();
    $('#form-address').blur();

    if(check_name && check_phone && check_address){
        $.ajax({
            url: '/user/update/self',
            data: $('#form-user-modify').serialize(),
            dataType: 'JSON',
            type: 'POST',
            error: (err) => {
                alert('保存信息请求失败.');
                console.error(err.responseText)
            },
            success: (data) =>{
                open_toast((data['code'] == 1 ? 'success' : 'fail'), data['message'])
            }
        })
    } else alert('请按提示输入规范的信息.')
})
// 弹窗关闭后自动刷新窗口
$('.toast').bind('hidden.bs.toast', function () {
   location.reload()
})